<template>
  <div class="box">
    <div class="table">
      <li class="th">
        <span class="td-type">业务类型</span>
        <span>总量</span>
        <span>已售</span>
        <span>寄存</span>
        <span>存量</span>
      </li>
      <!-- <vue-seamless-scroll :data="list" :class-option="defaultOption" style="height:2.5rem;overflow:hidden"> -->
      <div class="table-body">
        <li class="td">
          <span class="td-type">公墓</span>
          <span>{{ getGM.sumGrave }}</span>
          <span>{{ getGM.yiShouGrave }}</span>
          <span></span>
          <span>{{ getGM.cunFang }}</span>
        </li>
        <li class="td column">
          <span class="column-row">
            <span class="td-type">骨灰楼单格位</span>
            <span>{{ getJcDan.zGeWei }}</span>
            <span>{{ getJcDan.yIShouWFang }}</span>
            <span>{{ getJcDan.fEiJiCun }}</span>
            <span>{{ getJcDan.yongJiuJiCun }}</span>
          </span>
          <span class="column-row">
            <span class="td-type">骨灰楼双格位</span>
            <span>{{ getJcShuang.zGeWei }}</span>
            <span>{{ getJcShuang.yIShouWFang }}</span>
            <span>{{ getJcShuang.fEiJiCun }}</span>
            <span>{{ getJcShuang.yongJiuJiCun }}</span>
          </span>
        </li>
        <li class="td">
          <span class="td-type">壁葬</span>
          <span>{{ getBz.sumGrave }}</span>
          <span>{{ getBz.yiShouGrave }}</span>
          <span></span>
          <span>{{ getBz.cunFang }}</span>
        </li>
      </div>
      <!-- </vue-seamless-scroll> -->
    </div>
  </div>
</template>

<script>
import * as Api from "@/api/home";
import axios from 'axios'
export default {
  name: "homeLeftTop",
  data() {
    return {
      getGM: {
        cunFang: 0,
        sumGrave: 0,
        yiShouGrave: 0
      },
      getBz: {
        cunFang: 0,
        sumGrave: 0,
        yiShouGrave: 0
      },
      getJcDan: {
        fEiJiCun: 0,
        yIShouWFang: 0,
        yongJiuJiCun: 0,
        zGeWei: 0
      },
      getJcShuang: {
        fEiJiCun: 0,
        yIShouWFang: 0,
        yongJiuJiCun: 0,
        zGeWei: 0
      }
    };
  },
  created() {
    this.getData()
  },
  mounted() {
    window.addEventListener("resize", this.screenAdapter);
  },
  methods: {
    async getData() {
      let { data } = await axios({
        method: 'post',
        url: `${this.baseUrl}?action=BusinessData`
      })
      if (data._issuccess !== 1) return this.$message.error(data._msg)
      let res = data._data
      this.getGM = res.getGM[0]
      this.getJcDan = res.getJcDan[0]
      this.getJcShuang = res.getJcShuang[0]
      this.getBz = res.getBz[0]
    },
  },
  destroyed() {
    // 在组件销毁的时候, 需要将监听器取消掉
    window.removeEventListener("resize", this.screenAdapter);

  },
};
</script>

<style lang="scss" scoped>
@import '@/assets/scss/mixin.scss';

.box {
  position: relative;
  height: 5.075rem;
  padding: 0 .25rem 0;
  box-sizing: border-box;
  // background: rgba(6, 69, 115, 0.4);
  background: url('../../assets/imgs/box-border.png') no-repeat;
  background-size: 100% 100%;
  display: flex;
  flex-direction: column;
  padding: .2rem;

  .table {
    flex: 1;
    height: calc(100% - 0.35rem);

    .table-body {
      height: calc(100% - 1rem);
      overflow-y: auto
    }

    .th,
    .td {
      @include flex();
      padding: .4rem 0;
      background: #032D4C;

      span {
        width: 20%;
        text-align: center;
        padding: 0 .125rem;
        font-size: .2rem;
        font-weight: 700;
      }

      .td-type {
        width: 25%;
      }
    }

    .column {
      width: 100%;
      display: flex;
      flex-direction: column;
      padding: 0.3rem 0;

      .column-row {
        display: flex;
        flex: none;
        width: 100%;
        padding: 0;
        span {
          width: 20%;
          text-align: center;
          padding: 0 .125rem;
          font-size: .2rem;
          font-weight: 700;
        }

        .td-type {
          width: 25%;
        }
      }

      .column-row:nth-child(1) {
        margin-bottom: 0.15rem;
      }
    }

    .th {
      span {
        font-weight: bold;
      }
    }

    .th,
    .td:nth-child(even) {
      background: #044269;
    }
  }
}
</style>
